<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-select
      :show-search="openSearch"
      :placeholder="placeholder"
      @popupScroll="popupScroll"
      @change="change"
      optionFilterProp="children"
      v-model="roleTypeId"
      showSearch
      :allow-clear="true"
      :field-names="{ label: 'name', value: 'roleTypeId' }"
      :option="dataList"
      style="z-index: 0;">
      <a-select-option v-for="(item, index) in dataList" :key="item.roleTypeId" :value="item.roleTypeId">
        {{ item.name }}
      </a-select-option>
    </a-select>
  </a-spin>
</template>

<script>
import { getRoleTypes } from '@/api/base'
export default {
    props: {
        placeholder: {
            type: String,
            default: '请选择从某角色类型',
            required: false
        },
        pageSize: {
            type: Number,
            default: 8,
            required: false
        },
        openSearch: {
            type: Boolean,
            default: false,
            required: false
        },
        value: {
            type: [String, Number],
            required: false
        },
        triggerChange: {
            type: Boolean,
            default: false,
            required: false
        },
        defaultId: {
            type: String,
            required: false,
            default: ''
        }
    },
    data () {
        return {
            dataList: [],
            pageNo: 1,
            max: false,
            spinning: false,
            searchWorld: '',
            total: 0,
            Type: '',
            // undefined 下拉提示文字需要为undefined才能显示
            roleTypeId: undefined
        }
    },

    mounted () {
        if (this.max) return
        this.loadDatas()
    },
    methods: {
        // init() {
        //     if (this.max) return
        //     this.loadDatas()

        // },
        // 重置
        onReset () {
            this.roleTypeId = undefined
        },
        loadDatas () {
            this.pageNo = 1
            var param = {
                current: this.pageNo,
                pageSize: this.pageSize,
                description: '',
                name: ''
            }
            getRoleTypes(param).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.datas
                    this.total = res.data.total
                }
            })
        },
        // 滚动条滚动监听方法
        async popupScroll (e) {
            const that = this
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
            const clientHeight = target.clientHeight // 滑动最低高度
            // 当下拉框滚动条到达底部的时候
            if (!this.max && scrollHeight < clientHeight + 2) {
                this.spinning = true
                // 数据起始条数
                this.pageNo++
                var newList = []
                var param = {
                    current: this.pageNo,
                    pageSize: this.pageSize,
                    description: '',
                    name: ''
                }
                // this.listUrl,
                await getRoleTypes(param).then((res) => {
                    if (res.code == 200) {
                        newList = res.data.datas
                        that.total = res.data.total
                        if (newList.length == 0) {
                            that.max = true
                        }
                    }
                })
                if (that.total != this.dataList.length) {
                    // 数据追加
                    this.dataList = this.dataList.concat(newList)
                }
                this.spinning = false
            }
        },
        // 下拉框搜索方法
        onSearch (val) {
            if (val.length != 0) {
                this.searchWorld = val
                this.dataList = []
                this.max = false
                this.loadDatas()
            } else {
                this.searchWorld = ''
                this.dataList = []
                this.max = false
                this.loadDatas()
            }
        },
        change (val) {
            if (this.triggerChange) {
                this.$emit('change', val)
            } else {
                this.$emit('input', val)
            }
        }
    }
}
</script>

<style scoped>
.spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}
</style>
